<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="d3.js"></script>
    <style>
        div.chart{
            font-family:sans-serif;
            font-size:0.7em;
        }
        div.bar {
            background-color:DarkRed;
            color:white;
            height:3em;
            line-height:3em;
            padding-right:1em;
            margin-bottom:2px;
            text-align:right;
            margin-left:22em;
        }
        div.label {
            height:3em;
            line-height:3em;
            padding-right:1em;
            margin-bottom:2px;
            float:left;
            width:20em;
            text-align:right;
        }
        
    </style>
    <script>
    function draw(data) {
        "use strict";
        
        console.log(data.cash)
        
        d3.select("body")
            .append("div")
            .attr("class", "chart")
            .selectAll("div.bar")
            .data(data.cash)
            .enter()
            .append("div")
            .attr("class","line")
    
        d3.selectAll("div.line")
            .append("div")
            .attr("class","label")
            .text(function(d){return d.name})
        
        d3.selectAll("div.line")
            .append("div")
            .attr("class","bar")
            .style("width", function(d){return d.count/100 + "px"})
            .text(function(d){return Math.round(d.count)});
    
            
            
    }
    </script>
</head>
<body>
    <script>
        d3.json('data/plaza_traffic.json', draw);
    </script>
</body>
</html>